<template>
  <div>
    <!--加载中样式-->
    <el-div v-loading.fullscreen.lock="load0"></el-div>
    <!--培训中-->
    <el-span v-loading.fullscreen.lock="loading"
             :element-loading-text="loadtext"
             :element-loading-spinner="loadingspinner"
             element-loading-background="rgba(0, 0, 0, 0.7)"></el-span>
    <!--通过培训-->
    <el-span v-loading.fullscreen.lock="loading2"
             :element-loading-text="loadtext2"
             :element-loading-spinner="loadingspinner2"
             element-loading-background="rgba(0, 0, 0, 0.7)"></el-span>
    <div style="margin-left: 30px;" v-if="x==0">
      <p><span class="rem">教师ID：<span class="blue">{{uid}}</span></span></p>
      <p>
        <span class="rem">管理班级(cls_id)：</span><br>
        <span class="rem m-ll" style="color: dodgerblue" v-if="data1.cls_info" v-for="item in data1.cls_info">{{item.name}}({{item.id}})</span>
        <span class="rem m-ll" style="color: dodgerblue" v-else>暂无管理的班级</span>
      </p>
      <div>
        <span class="rem">当前督导资格：</span><br>
        <p class="rem m-ll" style="color: dodgerblue;margin-top: 0;margin-bottom: 8px" v-if="item.status==1"
           v-for="item in data1.pro_info">{{item.project_name}}({{item.project_id}}):有</p>
        <p class="rem m-ll" style="color: grey;margin-top: 0;margin-bottom: 8px" v-else
        >{{item.project_name}}({{item.project_id}}):无</p>
      </div>
    </div>
    <div style="margin-left: 30px;" v-if="x==1">
      <p><span class="rem">未通过培训的科目：</span></p>
      <div v-if="data1.need.length">
        <p v-for="(item) in data1.need" class="h"><span class="rem m-ll tishi">{{item.name}}</span>
          <el-button type="primary" plain @click="pass(item.id,1)" style="margin-left: 15%">点我通过培训(￥9)</el-button>
          <el-button type="info" round disabled style="margin-left: 15%">反向功能</el-button>
        </p>
      </div>
      <p v-else class="rem m-ll tishi">没有需要培训的科目</p>

      <p><span class="rem">已培训完成的科目：</span></p>
      <div v-if="data1.already_info.length">
        <p v-for="item in data1.already_info" class="h"><span class="rem m-ll tishi">{{item.project_name}}</span>
          <el-button type="info" round disabled style="margin-left: 15%">点我通过培训</el-button>
          <el-button type="primary" plain @click="pass(item.project_id,2)" style="margin-left: 15%">反向功能(￥3)</el-button>
        </p>
      </div>
      <p v-else class="rem m-ll tishi">没有已经通过培训的科目</p>
    </div>
    <div style="margin-left: 30px;" v-if="x==2">
      <logs></logs>
    </div>
    <div style="margin-left: 30px;" v-if="x==3">
      <div v-if="game_index">
        <div style="height: 50px;text-align: center"><h2>小玩怡情，大玩伤身(余额<span
          style="color: red;font-size: 1.5em">{{money}}</span>元)</h2></div>
        <div>
          <div class="game-list" v-for="(item,index) in game_list" :key="index" @click="game_item(index,item.m)">
            <div class="yuan">郭</div>
            <div class="tag">--Decade出品--</div>
            <div class="text">{{item.n}}</div>
            <el-tooltip content="进入该场需花费金额" placement="top">
              <div class="pay">￥{{item.m}}</div>
            </el-tooltip>
          </div>
        </div>
      </div>
      <div v-else>
        <el-button type="primary" round style="width: 150px;position: absolute;top:24px;right: 30px;z-index: 13"
                   @click="yue">查看余额</el-button>
        <el-button type="primary" round style="width: 100px;position: absolute;top:24px;left: 30px;z-index: 13"
                   @click="back">返回
        </el-button>
        <games v-if="n==0"></games>
        <pt v-if="n==1"></pt>
        <bird v-if="n==2"></bird>
        <fk v-if="n==3"></fk>
        <zz v-if="n==4"></zz>
        <cp v-if="n==5"></cp>
      </div>
    </div>
    <!--<div style="margin-left: 30px;" v-if="x==4">-->
    <!--<pt></pt>-->
    <!--</div>-->
    <!--<div style="margin-left: 30px;" v-if="x==5">-->
    <!--<bird></bird>-->
    <!--</div>-->
  </div>

</template>

<script>
import {api, URL} from '../../api/index'
import logs from '../log'
import games from '../game'
import pt from '../game-pt'
import bird from '../bird/bird'
import fk from '../games/fk'
import zz from '../games/zz'
import cp from '../games/cp'
export default {
  data () {
    return {
      load0: true,
      loading: false,
      loadtext: '正在努力通过培训。。。',
      loadingspinner: 'el-icon-loading',
      loading2: false,
      loadtext2: '培训完成！',
      loadingspinner2: 'el-icon-circle-check',
      uid: window.localStorage.getItem('uid'),
      data1: {},
      game_list: [{n: '火眼金睛', m: 8}, {n: '数字拼图', m: 8}, {n: '桌球大师(网)', m: 12}, {n: '俄罗斯方块(网)', m: 12}, {
        n: '澳门赌场', m: 0}, {n: '博彩', m: 8}],
      game_index: true, // 游戏主页面与内容页切换标识
      n: -1, // 点击那个重新赋值
      money: 0
    }
  },
  props: {
    x: {'type': Number, default: 0}
  },
  methods: {
    // 点击通过培训
    pass (id, type) {
      if (type == 2) {
        this.loadtext = '正在努力取消培训。。。'
        this.loadtext2 = '取消成功！'
      }
      this.loading = true
      setTimeout(() => {
        api.get(URL.DUDAO(id, type)).then(res => {
          let resData = res
          if (resData.status == 1) {
            this.loading = false
            this.loading2 = true
            setTimeout(() => {
              this.loading2 = false
              this.loadtext = '正在努力通过培训。。。'
              this.loadtext2 = '培训完成！'
              this.info()
            }, 1500)
          } else {
            this.loadtext = resData.message
            setTimeout(() => {
              this.loading = false
              this.loadtext = '正在努力通过培训。。。'
              this.loadtext2 = '培训完成！'
            }, 1500)
          }
        })
      }, 4000)
    },
    //  初始化函数
    info () {
      this.get_money()
      this.load0 = true
      api.get(URL.TEAINDEX).then(res => {
        let resData = res
        if (resData.status == 1) {
          this.load0 = false
          this.data1 = resData.data
        } else {
          this.load0 = false
          this.$alert('加载失败', '错误提示！')
        }
      })
    },
    game_item (index, money) {
      if (this.money < money) {
        this.$alert('余额不足，请前往赌场兑换金额', '错误提示！', {center: true, type: 'warning'})
      } else {
        this.money = this.money - money
        this.n = index
        this.game_index = false
        api.post('/vue/game/dc/update/?type=2', {'num': this.money}).then(res => {
          this.money = res.data.corn
        })
      }
    },
    back () {
      this.n = -1
      this.game_index = true
      this.get_money()
    },
    get_money () {
      api.get('/vue/game/dc/').then(res => {
        this.money = res.data.corn
      })
    },
    yue () {
      api.get('/vue/game/dc/').then(res => {
        this.$alert('当前余额：' + res.data.corn + '元', '余额提示！', {center: true, type: 'warning'})
      })
    }
  },
  created () {
    this.info()
    this.get_money()
  },
  components: {
    logs,
    games,
    pt,
    bird,
    fk,
    zz,cp
  }
}
</script>

<style scoped>
  .text {
    font-size: 2rem;
    text-align: center;
    line-height: 180px;
  }

  .game-list {
    height: 180px;
    width: 210px;
    border: deepskyblue 5px solid;
    display: inline-block;
    margin-top: 20px;
    margin-left: 20px;
    box-shadow: 3px 2px 2px 2px grey;
    border-radius: 10px;
    background-color: lightskyblue;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .game-list:hover {
    border: orange 5px solid;
    background-color: peachpuff;
  }

  .yuan {
    height: 50px;
    width: 50px;
    background-color: black;
    border-radius: 50%;
    position: absolute;
    top: 0;
    color: white;
    font-size: 2rem;
    text-align: center;
    line-height: 50px;
  }

  .tag {
    height: 20px;
    width: 115px;
    position: absolute;
    right: -25px;
    top: 20px;
    background-color: black;
    color: white;
    font-size: 10px;
    text-align: center;
    transform: rotate(45deg);
  }

  .pay {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    background-color: black;
    color: white;
    position: absolute;
    font-size: 14px;
    text-align: center;
    line-height: 40px;
    right: 0;
    bottom: 0;
  }
</style>
